<template>
  <view class="navigationBar"
        :style="{paddingTop:paddingStatusBar?statusBarHeight+'px':'0px',backgroundColor:custom?'':backgroundColor}">
    <view class="navigationBar-main" v-if="!custom" :style="{color}">
      <view class="navigationBar-main-left" v-show="showBack" @click="onBack">
        <image src="/@/static/images/fanhui.png"></image>
      </view>
      <view class="navigationBar-main-center">{{ title }}</view>
      <view class="navigationBar-main-right"></view>
    </view>
    <slot></slot>
  </view>
</template>

<script setup>
import {onLoad} from "@dcloudio/uni-app";
import {ref} from "vue"
import {getStatusBarHeight} from "/@/utils/util";

const props = defineProps({
  custom: {
    type: Boolean,
    default: false
  },
  showBack: {
    type: Boolean,
    default: true
  },
  title: {
    type: String,
    default: ''
  },
  paddingStatusBar: {
    type: Boolean,
    default: true
  },
  paddingStatusBarColor: {
    type: String,
    default: '#ffffff'
  },
  backgroundColor: {
    type: String,
    default: '#ffffff'
  },
  color: {
    type: String,
    default: '#313133'
  },
  customBack: {
    type: Boolean,
    default: false
  }
})

const emits = defineEmits(['back'])

const statusBarHeight = ref(20)

onLoad(() => {
  statusBarHeight.value = getStatusBarHeight()
})
const onBack = () => {
  if (!props.customBack) {
    uni.navigateBack()
    return
  }
  emits('back')
}
</script>

<style lang="scss" scoped>
.navigationBar {
  &-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 44px;
    padding: 0 16px;

    &-left {
      display: flex;
      align-items: center;

      image {
        width: 16px;
        height: 16px;
        vertical-align: bottom;
      }
    }

    &-center {
      font-size: $fontSizeXl;
      font-weight: 600;
    }
  }
}
</style>
